<script setup>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.min.css'
import { ref } from 'vue'

let imgSrc = ref('')
let cropImg = ref('')
let cropper = ref(null)
let cropperVisible = ref(false)

// 上传图片
const setImage = (e) => {
  const file = e.target.files[0]

  if (file.type.indexOf('image/') === -1) {
    alert('Please select an image file')
    return
  }

  const reader = new FileReader()

  reader.onload = (event) => {
    imgSrc.value = event.target.result
    // rebuild cropperjs with the updated source
    cropper.value.replace(event.target.result)
    cropperVisible.value = true
  }

  reader.readAsDataURL(file)
}
// 确认裁切
const confirmCrop = () => {
  cropper.value.getCroppedCanvas().toBlob((blob) => {
    const url = URL.createObjectURL(blob)
    cropImg.value = url
    cropperVisible.value = false
  })
}
// 取消裁切
const cancelCrop = () => {
  imgSrc.value = ''
  cropper.value.destroy()
  cropperVisible.value = false
}
</script>

<template>
  <div class="upload box clmcenter">
    <div class="choose">
      <input ref="input" type="file" name="image" accept="image/*" @change="setImage" />
      <svg
        t="1762312071211"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6097"
        width="64"
        height="64"
        v-show="!imgSrc"
      >
        <path
          d="M576 928H192c-52.992 0-96-43.093333-96-96V192c0-52.992 43.093333-96 96-96h640c52.992 0 96 43.093333 96 96v384.064c0 17.706667-14.293333 32-32 32s-32-14.293333-32-32V192.021333c0-17.706667-14.4-32-32-32H192c-17.706667 0-32 14.378667-32 32v639.957334c0 17.706667 14.4 32 32 32h384c17.706667 0 32 14.314667 32 32 0 17.706667-14.293333 32.021333-32 32.021333zM128 693.312a32.064 32.064 0 0 1-22.613333-54.698667l159.402666-159.338666a95.786667 95.786667 0 0 1 110.72-17.984l173.589334 86.805333c12.309333 6.186667 27.093333 3.797333 36.8-5.994667l287.402666-287.445333a32.042667 32.042667 0 0 1 45.290667 45.312L631.210667 587.392a95.786667 95.786667 0 0 1-110.72 18.005333l-173.589334-86.826666a31.616 31.616 0 0 0-36.8 6.016l-159.509333 159.317333c-6.186667 6.314667-14.4 9.386667-22.592 9.386667z m320-277.376c-52.906667 0-96-43.093333-96-96s43.093333-96.021333 96-96.021333 96 43.093333 96 96-43.093333 96.021333-96 96.021333z m0-128c-17.6 0-32 14.378667-32 32 0 17.6 14.4 32 32 32s32-14.4 32-32c0-17.621333-14.4-32-32-32zM768 928c-17.706667 0-32-14.293333-32-32v-192.021333c0-17.706667 14.293333-32 32-32s32 14.293333 32 32v192c0 17.706667-14.293333 32.021333-32 32.021333z m128-128c-7.893333 0-15.701333-2.922667-21.909333-8.725333L768 691.669333l-106.090667 99.712a31.936 31.936 0 0 1-45.226666-1.408 31.957333 31.957333 0 0 1 1.408-45.205333l112.213333-105.386667A48.554667 48.554667 0 0 1 768 621.44c14.72 0 28.501333 6.613333 37.696 17.92l112.213333 105.386667A31.957333 31.957333 0 0 1 896 800z"
          fill="#111111"
          p-id="6098"
        ></path>
      </svg>
      <img v-if="cropImg" :src="cropImg" />
    </div>
  </div>

  <div class="cropperbox" v-show="cropperVisible">
    <vue-cropper
      class="vue-cropper"
      ref="cropper"
      :aspect-ratio="1 / 1"
      drag-mode="move"
      :center="true"
      :src="imgSrc"
    />
    <div class="cropperbtnbox">
      <button @click="cancelCrop">取消</button>
      <button @click="confirmCrop">确认</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.upload {
  .choose {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      pointer-events: none;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style>
.vue-cropper {
  width: 100%;
  height: 100%;
}
.cropperbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99;
}
.cropperbtnbox {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}
.cropperbtnbox button {
  width: 200px;
  height: 75px;
  margin: 0 30px;
  font-size: 30px;
  border-style: none;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #3399ff;
  box-sizing: border-box;
  color: #000;
}
.cropperbtnbox button:last-child {
  background: #3399ff;
  color: #fff;
}
.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}
</style>
